<template>
  <div>
    <div style="margin: 0 auto; width: 40px; height: 40px; padding-top: 50px">
      <img src="./img/icon.png" alt="" width="100%" height="100%" />
    </div>

    <div
      style="
        width: 334px;
        height: 473px;
        border-radius: 30px;
        background-color: white;
        margin: 30px auto;
      "
    >
      <ul>
        <li>
          <h4 style="display: flex; justify-content: center; padding-top: 30px">
            欢迎登录有料App
          </h4>
        </li>
        <li>
          <van-form @submit="onSubmit" style="margin-top: 50px">
            <van-cell-group inset>
              <!-- 电子邮件格式认证 -->
              <van-field
                v-model="username"
                name="用户名"
                label="Email"
                placeholder="输入电子邮箱"
                style="margin-bottom: 10%; border: 1px solid #ccc"
                :rules="[
                  {
                    required: true,
                    message: '请填写Email',
                  },
                  {
                    pattern:
                      /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请输入正确的邮箱格式',
                  },
                ]"
              />

              <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                style="border: 1px solid #ccc"
              />
            </van-cell-group>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 7%;
                margin-bottom: 10%;
              "
            >
              <van-checkbox
                v-model="checked"
                shape="square"
                style="margin-left: 15px"
                >记住我</van-checkbox
              >
              <span
                ><p style="float: right; color: #1989fa; margin-right: 15px">
                  忘记密码？
                </p></span
              >
            </div>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                登录
              </van-button>
            </div>
            <div
              style="display: flex; justify-content: center; margin-top: 10%"
            >
              <p href="#" style="color: #1989fa">还没有账号？</p>
              <p>
                <a href="#" style="color: #1989fa" @click="ZhuC()">去注册</a>
              </p>
            </div>
          </van-form>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import "./style/index.css";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const username = ref("");
const password = ref("");
const checked = ref(false);

//获取本地存储的username和password
const localUsername = localStorage.getItem("username");
const localPassword = localStorage.getItem("password");
console.log(localUsername, localPassword);

const onSubmit = (values) => {
  console.log("submit", values);

  //跳转传值
  // router.push({
  //   path: "/phone",
  //   query: {
  //     username: username.value,
  //     password: password.value,
  //   },
  // });
  //判断本地存储的username和password是否与输入的正确
  //获取本地存储的username和password



  if (localUsername === username.value && localPassword === password.value) {
    router.push("/");
  } else {
    alert("用户名或密码错误");
  }
};
const ZhuC = () => {
  router.push("/phone");
};
</script>

<style lang="scss" scoped></style>
